import React, { useState } from "react";
import {
  Typography,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button,
  FormControl,
  FormLabel,
  RadioGroup,
  FormControlLabel,
  Radio,
  Box,
  IconButton,
  InputAdornment,
} from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import CloseIcon from "@mui/icons-material/Close";
import TimerIcon from "@mui/icons-material/Timer";
import TimerOffIcon from "@mui/icons-material/TimerOff";

function AddProjectDialog({ open, onClose, onAdd }) {
  const [projectName, setProjectName] = useState("");
  const [hasTimer, setHasTimer] = useState(false);

  const handleSubmit = () => {
    if (projectName.trim()) {
      onAdd({
        name: projectName.trim(),
        hasTime: hasTimer,
      });
      setProjectName("");
      setHasTimer(false);
      onClose();
    }
  };

  const handleKeyPress = (event) => {
    if (event.key === "Enter" && projectName.trim()) {
      handleSubmit();
    }
  };

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      PaperProps={{
        sx: {
          borderRadius: 3,
          boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12)",
        },
      }}
    >
      <DialogTitle
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          pb: 1,
          px: 3,
          borderBottom: 1,
          borderColor: "divider",
        }}
      >
        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
          <AddIcon color="primary" />
          <Typography
            variant="h6"
            sx={{ fontFamily: '"ZCOOL KuaiLe", cursive' }}
          >
            添加新项目
          </Typography>
        </Box>
        <IconButton onClick={onClose} size="small">
          <CloseIcon />
        </IconButton>
      </DialogTitle>

      <DialogContent sx={{ pt: 3, px: 3 }}>
        <TextField
          autoFocus
          fullWidth
          label="项目名称"
          placeholder="输入项目名称..."
          value={projectName}
          onChange={(e) => setProjectName(e.target.value)}
          onKeyPress={handleKeyPress}
          variant="outlined"
          sx={{ mb: 3, mt: 3 }}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <AddIcon color="action" />
              </InputAdornment>
            ),
          }}
          InputLabelProps={{
            shrink: true,
          }}
        />

        <FormControl component="fieldset" fullWidth>
          <FormLabel component="legend" sx={{ mb: 1 }}>
            <Typography variant="body2" color="text.secondary">
              计时设置
            </Typography>
          </FormLabel>
          <RadioGroup
            row
            value={hasTimer}
            onChange={(e) => setHasTimer(e.target.value === "true")}
            sx={{ gap: 3 }}
          >
            <FormControlLabel
              value={false}
              control={<Radio />}
              label={
                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                  <TimerOffIcon fontSize="small" />
                  <Typography variant="body2">不计时</Typography>
                </Box>
              }
            />
            <FormControlLabel
              value={true}
              control={<Radio />}
              label={
                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                  <TimerIcon fontSize="small" />
                  <Typography variant="body2">需要计时</Typography>
                </Box>
              }
            />
          </RadioGroup>
        </FormControl>
      </DialogContent>

      <DialogActions sx={{ px: 3, pb: 3, gap: 2 }}>
        <Button
          onClick={onClose}
          variant="outlined"
          sx={{ borderRadius: 2, minWidth: 100 }}
        >
          取消
        </Button>
        <Button
          onClick={handleSubmit}
          variant="contained"
          disabled={!projectName.trim()}
          sx={{ borderRadius: 2, minWidth: 100 }}
        >
          添加
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default AddProjectDialog;
